<div class="container">
	<div class="row">
		<div class="col-md-12">
			<div class="titlepage">
				<h2>我要开店</h2>
			</div>
		</div>
	</div>
</div>
<div class="brand-bg">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<form class="main_form open-shop-form">
					<div class="col-md-12 img-open-shop">
						<div class="shoplogo">
							<img src="icon/Product-Sale-Flyer-Template-V-3-990x518.jpg"/>
						</div>
						<div><button type="button" class="btn btn-danger logoclick">修改图片</button>
						<input id="logoPic" type="file" class="hidden-val"></div>
					</div>
					<div class="shopName col-md-12">
						<input class="form-control" placeholder="店铺名称" type="text" name="shopName">
					</div>
					<div class="apassword col-md-12">
						<input class="form-control" placeholder="密码" type="password">
					</div>
					<div class="bpassword col-md-12">
						<input class="form-control" placeholder="确认密码" type="password" name="password">
					</div>
					<div class=" col-md-12">
						<a class="text-white send btn btn-dark">进入后台</a>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function (){
		$(".shopName input").change(function (){
			let shopName = $(".shopName input").val();
			if (shopName.length<=0){
				$(".shopName").children(".alert").remove();
				$(".shopName").prepend(`<div class="alert alert-danger" role="alert">请输入店铺名称！</div>`);
				return ;
			}
			let url = `/ruoyi/shop/ssoshopname`;
			$.ajax({
				url:url,
				data:{"shopName":shopName},
				dataType:"json",
				success(result){
					if(result.status===200){
						$(".shopName").children(".alert").remove();
						$(".shopName").prepend(`<div class="alert alert-success" role="alert">该名称可以使用</div>`);
					}else{
						$(".shopName").children(".alert").remove();
						$(".shopName").prepend(`<div class="alert alert-danger" role="alert">店铺名称重复!</div>`);
					}
				},
				error(){
					$(".shopName").children(".alert").remove();
					$(this).parents(".shopName").prepend(`<div class="alert alert-danger" role="alert">服务器异常</div>`);
				}
			});
		});

		$(".apassword input").change(function (){
			docheckpassword();
		});
		$(".bpassword input").change(function () {
			docheckpassword();
		});

		$(".logoclick").click(function (){
			$("#logoPic").click();
		});
		$("#logoPic").change(function (){
			let img = this.files;
			if(img.length==0){
				return ;
			}
			$(".shoplogo").empty();
			$(".shoplogo").append(domakepic(img[0]));
		});
		function domakepic(imgUrl){
			let reader = new FileReader();
			reader.readAsDataURL(imgUrl);
			reader.onload = function (){
				$("#mainContentId").data("logo",reader.result);
				$(".shoplogo").append(`<img src="${reader.result}" name="logo"/>`);
			}
		}
		function docheckpassword(){
			let bpassword =  $(".bpassword input").val();
			let apassword =  $(".apassword input").val();
			if (bpassword!=apassword){
				$(".bpassword").children(".alert").remove();
				$(".bpassword").prepend(`<div class="alert alert-danger" role="alert">密码两次不匹配!</div>`);
				$(".apassword").children(".alert").remove();
				$(".apassword").prepend(`<div class="alert alert-danger" role="alert">密码两次不匹配!</div>`);

			}else if (apassword.length<8||apassword.length>16){
				$(".apassword").children(".alert").remove();
				$(".apassword").prepend(`<div class="alert alert-danger" role="alert">密码长度为8-16位!</div>`);
			}
			else{
				$(".bpassword").children(".alert").remove();
				$(".apassword").children(".alert").remove();
				$(".apassword").prepend(`<div class="alert alert-success" role="alert">该密码可以使用</div>`);
			}
		}

		$(".send").click(function (){
			let shoplogo = $("#logoPic").val();
			let shopName = $(".shopName input").val();
			let shopaPassword = $(".apassword input").val();
			let shopbPassword = $(".bpassword input").val();
			if (shopName===null||shopName===''||shopaPassword===null||shopaPassword===''||shopbPassword===null||shopbPassword===''){
				alert("请填写完整信息!");
				return ;
			}
			if(shoplogo===null||shoplogo===''){
				alert("请上传logo!");
				return ;
			}
			let url = `/ruoyi/shop/open-shop`;
			let logo = $("#mainContentId").data("logo");
			let params = {"shopName":shopName,"password":shopaPassword,"logo":logo};
			console.log(params);
			$.ajax({
				url: url,
				data: params,
				type: "post",
				dataType: "json",
				success(result){
					if (result.status===200){
						location="http://localhost:9290";
					}
				},
				error(){
					alert("提交失败!");
				}
			});

		});
	});
</script>